<template>
	<view class="wx">
		<!--主体-->
		<view class="main">
			<view class="side">{{merchant}}</view>
			<view class="money">
				<text class="money_ico">¥</text>
				<text class="me">{{money}}</text>
			</view>
			<!--收款方信息-->
			<view class="info">
				<text class="payee">收款方</text>
				<text class="payee_name">{{merchant}}</text>
			</view>
			<!--按钮-->
			<button class="wx_btn" @click='isopentype()'>立即支付</button>
		</view>
		<!--底部-->
		<view class="bottom">
			<text class="text">支付安全由中国人民财产保险股份有限公司承保</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				merchant: '智多慧有限公司',
				money: '0', //金额
				car_number: '', //车牌号
				opentype: '', //开卡的类型
			}
		},
		onLoad(options) {
			this.car_number = options.car_number; //接受车牌号参数
			this.money = options.money //金额
			this.opentype = options.type //开类型
		},
		methods: {
			// 月卡支付操作
			async paymonthmoney() {
				const {
					data: res
				} = await uni.$http.post('/vip/month/open', {
					'car_number': this.car_number,
					'month_money': this.money
				})
				if (res.code === 200) {
					this.link() //跳转结果页面
				} else {
					// 弹出失败提示框
					uni.showToast({
						title: res.msg, // 提示的文字内容
						icon: 'error' // 提示图标
					});
				}
			},
			// 年卡支付操作
			async payyearmoney() {
				const {
					data: res
				} = await uni.$http.post('/vip/year/open', {
					'car_number': this.car_number,
					'year_money': this.money
				})
				if (res.code === 200) {

					this.link() //跳转结果页面
				} else {
					// 弹出失败提示框
					uni.showToast({
						title: res.msg, // 提示的文字内容
						icon: 'error' // 提示图标
					});
				}
			},
			// 出库支付操作
			async userpaymoney() {
				const {
					data: res
				} = await uni.$http.post('/car_info/pay/money', {
					'car_number': this.car_number,
					'money': this.money
				})
				if (res.code === 200) {
					this.link() //跳转结果页面
				} else {
					// 弹出失败提示框
					uni.showToast({
						title: res.msg, // 提示的文字内容
						icon: 'error' // 提示图标
					});
				}
			},
			// 判断开的卡
			isopentype() {
				uni.showToast({
					title: '支付中',
					duration: 2000,
					icon: 'loading',
				})
				setTimeout(() => {
					if (this.opentype === 'month') {
						this.paymonthmoney()
					} else if(this.opentype === 'year') {
						this.payyearmoney()
					}else{
						this.userpaymoney()
					}
				}, 2000)

			},
			link() {
				uni.navigateTo({
					url: `/pages/payrelust/payrelust?car_number=${this.car_number}&money=${this.money}`,
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wx {
		width: 100%;
		max-width: 420px;
		height: 100vh;
		background-color: rgb(247, 247, 247);

		.main {
			.side {
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 50px;
				font-weight: 450;
				font-size: 15px;
			}

			.money {
				width: 100%;
				text-align: center;
				font-weight: bold;

				.money_ico {
					padding-right: 5px;
					font-size: 22px;
				}

				.me {
					font-size: 37px;
				}
			}

			.info {
				margin-top: 20px;
				width: 100%;
				height: 50px;
				background-color: #ffffff;
				border: 1px solid rgb(229, 229, 229);

				.payee {
					float: left;
					width: 80px;
					height: 100%;
					text-align: center;
					line-height: 50px;
					font-size: 14px;
					color: rgb(128, 128, 128);
				}

				.payee_name {
					padding-right: 20px;
					float: right;
					height: 100%;
					line-height: 50px;
					font-size: 14px;
				}
			}

			.wx_btn {
				margin: 20px 2.5% 0px 2.5%;
				width: 95%;
				height: 45px;
				line-height: 45px;
				border-radius: 6px;
				border: none;
				color: rgb(251, 255, 255);
				background-color: rgb(7, 193, 96);
				font-size: 15px;

				&:active {
					color: rgb(143, 229, 183);
					background-color: rgb(1, 173, 87);
				}
			}
		}

		.bottom {
			.text {
				position: absolute;
				bottom: 25px;
				font-size: 11px;
				width: 100%;
				text-align: center;
				color: rgb(128, 128, 128);
			}
		}
	}
</style>